<template>
  <div class="Integral-wrap">
    <el-row>
      <el-col :span="4" style="background-color:#f3f3f3;">
        <!-- start 分类 -->
          <el-button size="small" type="primary" @click="addClassifyType = true">添加分类</el-button>
        <dragTreeTable :data="categoryData" :onDrag="onTreeDataChange" @click="selectType"></dragTreeTable>
      </el-col>
      <el-col :span="20" style="padding-left:10px;">
        <!-- start add goods topbar -->
        <div>
          <el-button
            size="small"
            type="primary"
            icon="el-icon-circle-plus"
            @click="addGoodsType = true"
          >添加商品</el-button>
          <el-button size="small" icon="el-icon-refresh" @click="refresh">刷新</el-button>
          <div class="r search">
            <el-input size="small" placeholder="请输入内容" prefix-icon="el-icon-search"></el-input>
          </div>
        </div>
        <!-- End add goods topbar -->
        <!-- start goodsList  -->
        <el-table :data="goodsList" style="width: 100%">
           <el-table-column prop="id" label="ID" width="100"></el-table-column>
          <el-table-column prop="name" label="商品图片" width="80">
            <template slot-scope="scope">
              <el-avatar :src="scope.row.avatar"></el-avatar>
            </template>
          </el-table-column>
          <el-table-column prop="title" label="商品名称" width="180"></el-table-column>
          <el-table-column prop="inventory" label="库存" width="50"></el-table-column>
          <el-table-column prop="sale_count" label="售量" width="50"></el-table-column>
          <el-table-column prop="price" label="商品标价" width="100"></el-table-column>
          <el-table-column prop="integral" label="兑换积分" width="100"></el-table-column>
          <el-table-column prop="status" label="状态">
            <template slot-scope="scope">
              <el-link v-if="scope.row.status == 'Normal'" type="success">售卖中</el-link>
              <el-link v-else type="info">已下架</el-link>
            </template>
          </el-table-column>

          <el-table-column fixed="right" label="操作" width="140">
            <template slot-scope="scope">
              <el-link v-if="scope.row.status == 'Normal'" type="danger">下架 &nbsp;</el-link>
              <el-link v-else type="primary">上架 &nbsp;</el-link>
              <el-button @click="editGood(scope.row)" type="text" size="small">编辑</el-button>
              <el-button @click="deleteGood(scope.row)" class="t-delete-1" type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
          <div slot="append">
               <el-pagination
               background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="page"
                :page-count="pageCount"
                :page-size="pageSize"
                layout="total, prev, pager, next"
                :total="count">
              </el-pagination>
          </div>
        </el-table>
       
        <!-- start goodsList  -->
      </el-col>
    </el-row>

    <el-dialog :title="typeTitle" :visible.sync="addClassifyType" width="30%">
      <el-form ref="formType.create" :model="formType" label-width="80px" size="mini">
        <el-form-item label="启用状态">
          <el-switch v-model="formType.status"></el-switch>
        </el-form-item>
        <el-form-item label="分类名称">
          <el-input width="200" v-model="formType.title"></el-input>
        </el-form-item>
        <el-form-item label="分类排序">
          <el-input width="200" v-model="formType.sort"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit('createType')">立即添加</el-button>
          <el-button @click="addClassifyType = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog :title="editTypeTitle" :visible.sync="editClassifyType" width="30%">
      <el-form ref="formType.create" :model="formType" label-width="80px" size="mini">
        <el-form-item label="启用状态">
          <el-switch v-model="formType.status"></el-switch>
        </el-form-item>
        <el-form-item label="分类名称">
          <el-input width="200" v-model="formType.title"></el-input>
        </el-form-item>
        <el-form-item label="分类排序">
          <el-input width="200" v-model="formType.sort"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit('editType')">立即修改</el-button>
          <el-button @click="editClassifyType = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- start Goods  -->
    <el-dialog title="添加新商品" :visible.sync="addGoodsType" width="50%">
      <el-form ref="goodsForm.add" :model="goodsForm" label-width="80px" size="mini">
        <el-form-item label="商品名称">
          <el-input v-model="goodsForm.add.title"></el-input>
        </el-form-item>
        <el-form-item label="是否上架">
          <el-switch v-model="goodsForm.add.status" />
        </el-form-item>
        <el-form-item label="多规格">
          <el-switch v-model="goodsForm.add.is_specification" />
        </el-form-item>
        <el-tabs v-model="activeName" type="card">
          <el-tab-pane label="基础设置" name="base">
            <el-form-item label="商品logo">
              <el-upload
                class="avatar-uploader"
                action="/api/store/admin/official/avatar"
                :data="token"
                :before-upload="beforeUpload"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
              >
                <img v-if="goodsForm.add.avatar" :src="goodsForm.add.avatar" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>

            <el-form-item label="副标题">
              <el-input v-model="goodsForm.add.sort_title"></el-input>
            </el-form-item>
            <el-form-item label="关键词">
              <el-input v-model="goodsForm.add.keywords"></el-input>
            </el-form-item>
            <el-form-item label="显示库存">
              <el-switch v-model="goodsForm.add.is_inventory" />
            </el-form-item>
            <el-form-item label="库存量">
              <el-input v-model="goodsForm.add.inventory"></el-input>
            </el-form-item>
            <el-form-item label="商品展示">
              <el-checkbox-group v-model="addcheckList" @change="checkChange">
                <el-checkbox label="热销"></el-checkbox>
                <el-checkbox label="推荐"></el-checkbox>
                <el-checkbox label="招牌"></el-checkbox>
                <el-checkbox label="折扣"></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="价格管理" name="price">
            <el-form-item label="商品标价">
              <el-input v-model="goodsForm.add.price"></el-input>
            </el-form-item>
            <el-form-item label="兑换积分">
              <el-input v-model="goodsForm.add.integral"></el-input>
            </el-form-item>
            <el-form-item label="库存量">
              <el-input v-model="goodsForm.add.inventory"></el-input>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="轮播图管理" name="image" class="uploadList">
            <el-upload
              action="/api/store/admin/official/images"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :data="token"
              :on-remove="handleRemove"
              file-list="add.images"
              :on-success="handleImageSuccess"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img class="avatar" :src="dialogImageUrl" alt />
            </el-dialog>
          </el-tab-pane>
          <el-tab-pane label="商品参数" name="parmas">
            <el-input placeholder="请输入内容" v-model="addParamTitle" style="width:50%">
              <template slot="prepend">参数标题</template>
              <el-button slot="append" icon="el-icon-plus" @click="addParam"></el-button>
            </el-input>
            <el-table :data="good_params" stripe style="width: 100%">
              <el-table-column prop="title" label="参数名称" width="180"></el-table-column>
              <el-table-column prop="value" label="参数值">
                <template slot-scope="{row}">
                  <el-input v-model="row.value" placeholder="请输入内容"></el-input>
                </template>
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="140">
              <template slot-scope="scope">
                <el-button @click="deleteParam(scope.$index)" class="t-delete-1" type="text" size="small">删除</el-button>
              </template>
            </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="商品规格" name="spec" v-if="goodsForm.add.is_specification">
            <div class="sku_container">
              <div class="stand">
                <div class="add">
                  <el-button type="primary" @click="addStand">添加规格</el-button>
                  <el-button type="primary" @click="getTable">生成规格列表</el-button>
                </div>
                <ul>
                  <li class="attr" v-for="(item,index) in standData" :key="index">
                    <div class="spec_header">
                      <el-input
                        placeholder="请输入属性"
                        v-model="item.title"
                        class="input-with-select"
                        style="width:50%"
                        size="mini"
                      >
                        <template slot="prepend">规格名称</template>
                        <el-button slot="append" @click="remove(index)" icon="el-icon-delete-solid"></el-button>
                      </el-input>
                      <el-button slot="append" @click="addAtrr(index)" size="mini">添加属性</el-button>
                    </div>

                    <div class="putt">
                      <div
                        class="putt-item"
                        v-if="item.children.length"
                        v-for="(subitem,i) in item.children"
                        :key="i"
                      >
                        <el-input v-model="subitem.title" placeholder="请输入值" size="mini">
                          <el-button
                            slot="append"
                            @click="closeAtrr(index,i)"
                            icon="el-icon-delete-solid"
                          ></el-button>
                        </el-input>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
              <div class="table">
                <el-table v-if="isTable" :data="tableData" border style="width: 100%">
                  <el-table-column prop="spec" label="属性" width="180"></el-table-column>
                  <el-table-column prop="count" label="库存" width="180">
                    <template slot-scope="{row}">
                      <el-input v-model="row.count" placeholder="请输入内容" size="mini"></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column prop="price" label="商品标价">
                    <template slot-scope="{row}">
                      <el-input v-model="row.price" placeholder="请输入内容" size="mini"></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column prop="integral" label="兑换积分">
                    <template slot-scope="{row}">
                      <el-input v-model="row.integral" placeholder="请输入内容" size="mini"></el-input>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="商品详情" name="remark">
            <tinymce ref="editor"
            v-model="goodsForm.add.remark"
            >
            </tinymce>
          </el-tab-pane>
        </el-tabs>
        <el-form-item>
          <el-button type="primary" @click="onSubmit('addGoods')">立即创建</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- End Goods -->
    <el-dialog :title="editGoodsTitle" :visible.sync="editGoodsType" width="50%">
      <el-form ref="goodsForm.add" :model="goodsForm" label-width="80px" size="mini">
        <el-form-item label="商品名称">
          <el-input v-model="goodsForm.edit.title"></el-input>
        </el-form-item>
        <el-form-item label="是否上架">
          <el-switch v-model="goodsForm.edit.status" />
        </el-form-item>
        <el-form-item label="多规格">
          <el-switch v-model="goodsForm.edit.is_specification" />
        </el-form-item>
        <el-tabs v-model="activeName" type="card">
          <el-tab-pane label="基础设置" name="base">
            <el-form-item label="商品logo">
              <el-upload
                class="avatar-uploader"
                action="/api/store/admin/official/avatar"
                :show-file-list="false"
                :data="token"
                :on-success="handleAvatarSuccess"
              >
                <img v-if="goodsForm.edit.avatar" :src="goodsForm.edit.avatar" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>

            <el-form-item label="副标题">
              <el-input v-model="goodsForm.edit.sort_title"></el-input>
            </el-form-item>
            <el-form-item label="关键词">
              <el-input v-model="goodsForm.edit.keywords"></el-input>
            </el-form-item>
            <el-form-item label="显示库存">
              <el-switch v-model="goodsForm.edit.is_inventory" />
            </el-form-item>
            <el-form-item label="库存量">
              <el-input v-model="goodsForm.edit.inventory"></el-input>
            </el-form-item>
            <el-form-item label="商品展示">
              <el-checkbox-group v-model="editcheckList" @change="checkChange">
                <el-checkbox label="热销"></el-checkbox>
                <el-checkbox label="推荐"></el-checkbox>
                <el-checkbox label="招牌"></el-checkbox>
                <el-checkbox label="折扣"></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="价格管理" name="price">
            <el-form-item label="商品标价">
              <el-input v-model="goodsForm.edit.price"></el-input>
            </el-form-item>
            <el-form-item label="兑换积分">
              <el-input v-model="goodsForm.edit.integral"></el-input>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="轮播图管理" name="image" class="uploadList">
            <el-upload
              action="/api/store/admin/official/images"
              list-type="picture-card"
              :data="token"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              :file-list="edit.images"
              :on-success="handleImageSuccess"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img class="avatar" :src="dialogImageUrl" alt />
            </el-dialog>
          </el-tab-pane>
          <el-tab-pane label="商品参数" name="params">
            <el-input placeholder="请输入内容" v-model="addParamTitle" style="width:50%">
              <template slot="prepend">参数标题</template>
              <el-button slot="append" icon="el-icon-plus" @click="addParam"></el-button>
            </el-input>
            <el-table :data="good_params" stripe style="width: 100%">
              <el-table-column prop="title" label="参数名称" width="180"></el-table-column>
              <el-table-column prop="value" label="参数值">
                <template slot-scope="{row}">
                  <el-input v-model="row.value" placeholder="请输入内容"></el-input>
                </template>
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="140">
              <template slot-scope="scope">
                <el-button @click="deleteParam(scope.$index)" class="t-delete-1" type="text" size="small">删除</el-button>
              </template>
            </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="商品规格" name="spec" v-if="goodsForm.edit.is_specification">
            <div class="sku_container">
              <div class="stand">
                <div class="add">
                  <el-button type="primary" @click="addStand">添加规格</el-button>
                  <el-button type="primary" @click="getTable">生成规格列表</el-button>
                </div>
                <ul>
                  <li class="attr" v-for="(item,index) in standData" :key="index">
                    <div class="spec_header">
                      <el-input
                        placeholder="请输入属性"
                        v-model="item.title"
                        class="input-with-select"
                        style="width:50%"
                        size="mini"
                      >
                        <template slot="prepend">规格名称</template>
                        <el-button slot="append" @click="remove(index)" icon="el-icon-delete-solid"></el-button>
                      </el-input>
                      <el-button slot="append" @click="addAtrr(index)" size="mini">添加属性</el-button>
                    </div>

                    <div class="putt">
                      <div
                        class="putt-item"
                        v-if="item.children.length"
                        v-for="(subitem,i) in item.children"
                        :key="i"
                      >
                        <el-input v-model="subitem.title" placeholder="请输入值" size="mini">
                          <el-button
                            slot="append"
                            @click="closeAtrr(index,i)"
                            icon="el-icon-delete-solid"
                          ></el-button>
                        </el-input>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
              <div class="table">
                <el-table v-if="isTable" :data="tableData" border style="width: 100%">
                  <el-table-column prop="spec" label="属性" width="180"></el-table-column>
                  <el-table-column prop="count" label="库存" width="180">
                    <template slot-scope="{row}">
                      <el-input v-model="row.count" placeholder="请输入内容" size="mini"></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column prop="price" label="商品标价">
                    <template slot-scope="{row}">
                      <el-input v-model="row.price" placeholder="请输入内容" size="mini"></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column prop="integral" label="兑换积分">
                    <template slot-scope="{row}">
                      <el-input v-model="row.integral" placeholder="请输入内容" size="mini"></el-input>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="商品详情" name="remark">
            {{goodsForm.edit.remark}}
            <tinymce ref="editor"
            v-model="goodsForm.edit.remark"
            >
            </tinymce>
          </el-tab-pane>
        </el-tabs>
        <el-form-item>
          <el-button type="primary" @click="onSubmit('editGoods')">立即修改</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import { sep } from "path";
import dragTreeTable from "drag-tree-table";
import tinymce from "../../../components/tinymce"
export default {
  name: "Integral",
  components: {
    dragTreeTable,tinymce
  },
  data() {
    return {
      pageSize:'15',
      editGoodsTitle:null,
      dialogVisible: false,
      activeName: "base",
      count:0,
      addParamTitle: null,
      editParamTitle: null,
      add: {
        images: null
      },
      edit: {
        images: null
      },
      typeTitle: "添加分类",
      formType: {
        status: true,
        title: null,
        sort: 0,
        icon: 0
      },
      tableData: [],
      input: "",
      isTable: false,
      standData: [],
      list: [],
      group: [],
      addcheckList: [],
      editcheckList:[],
      addClassifyType: false,
      editClassifyType: false,
      addGoodsType: false,
      editGoodsType: false,
      addspecType: false,
      currentCategoryId: 0,
      remark: "",
      categoryData: {
        lists: [],
        columns: [
          {
            type: "action",
            title: "名称",
            field: "title",
            align: "left",
            flex: 1,
            actions: [
              {
                text: "item.title",
                onclick: this.selectType,
                formatter: item => {
                  return item.title;
                }
              }
            ]
          },
          {
            title: "操作",
            type: "action",
            width: 80,
            align: "right",
            actions: [
              {
                text: "编辑",
                onclick: this.editType,
                formatter: item => {
                  return '<el-link type="danger")">编辑 &nbsp;</el-link>';
                }
              },
              {
                text: "删除",
                onclick: this.ondeleteType,
                formatter: item => {
                  return '<el-link type="danger" >删除</el-link>';
                }
              }
            ]
          }
        ]
      },
      good_params: [],
      goodsList: [],
      editTypeTitle: null,
      goodsForm: {
        add: {
          avatar: null,
          sort_title: null,
          title: null,
          keywords: null,
          is_discount: false,
          price: 10,
          original_price: 20,
          pack_price: 0,
          member_price: 0,
          member_original_price: 20,
          integral:0,
          is_specification: false,
          is_inventory: false,
          inventory: 0,
          status: true,
          sort: 0,
          remark: null,
          is_hot: false,
          is_recommend: false,
          is_specialty: false,
          avatar: null,
          name: "",
          library: "",
          sale: "",
          spec_data: null,
          spec_price: null,
          images: null
        },
        edit: {
          avatar: null,
          sort_title: null,
          title: null,
          keywords: null,
          is_discount: false,
          price: 10,
          original_price: 20,
          pack_price: 0,
          member_price: 0,
          member_original_price: 20,
          is_specification: false,
          is_inventory: false,
          integral:0,
          inventory: 0,
          status: true,
          sort: 0,
          remark: null,
          is_hot: false,
          is_recommend: false,
          is_specialty: false,
          avatar: null,
          name: "",
          library: "",
          sale: "",
          spec_data: null,
          spec_price: null,
          images: null
        }
      },
      addSpecList: [],
      specDataList: [],
      spec_list: [],
      specTopTableData: [],
      dialogImageUrl: null,
      editId:null,
      page:1,
      pageCount:0,
      token: null
    };
  },
  created() {},
  mounted() {
    this.getCategoryList();
    this.token = {
      token:sessionStorage.getItem('accessToken')
    };
  },
  watch: {
    onClick (e, editor) {
      console.log('Element clicked')
      console.log(e)
      console.log(editor)
    },
    currentCategoryId: function(v, ov) {
      this.getGoodsList({}, v);
    },
    good_params: function(v, ov) {
      this.goodsForm.add.params = JSON.stringify(v);
      this.goodsForm.edit.params = JSON.stringify(v);
    },
    tableData: function(v, ov) {
      this.goodsForm.add.spec_price = JSON.stringify(v);
    }
  },

  methods: {
    handleSizeChange(event){
      this.pageSize = event;
    },
    handleCurrentChange(page){
      this.getGoodsList({page:page},this.currentCategoryId)
    },
    editGood(item){
      this.editId = item.id
      this.editGoodsTitle = '修改['+item.title+']商品';
      this.goodsForm.edit = null;
      this.goodsForm.edit = item;
      let check = this.editcheckList;
      if(item.status){
        this.goodsForm.edit.status = item.status == 'Normal' ? true : false
      }

       this.goodsForm.edit.is_specification = item.is_specification == '1' ? true : false
      if(item.is_hot){
        check.push('热销');
      }
      if(item.is_recommend){
        check.push('推荐');
      }
      if(item.is_specialty){
        check.push('招牌');
      }
      if(item.is_discount){
        check.push('折扣');
      }
      if(item.images){
        let array =[];
        let imgs = JSON.parse(item.images);
        imgs.forEach((item,key)=>{
          array.push({
            url:item
          })
        })
        this.edit.images = array;
      }
      if(item.type){
        item.type.forEach((val,key) => {
          val.children = val.spec;
        })
        this.standData = item.type;
        this.isTable = true;
        this.tableData = item.spec_price
      }

      if(item.params){
        this.good_params = JSON.parse(item.params);
      }
      
      
      this.editGoodsType = true;
      
    },
    selectType(item) {
      this.currentCategoryId = item.id;
    },
    addParam() {
      
      let title = this.addParamTitle;
      
      if(title && title.replace(/\s+/g,"")){
        title = title.replace(/\s+/g,"");
        let array = {
          title: title,
          value: null
        };
        this.good_params.push(array);
      }else{
        this.notice("error", '标题不能为空');
      }
      
    },
    deleteParam(key){
      this.good_params.splice(key,1); 
    },
    checkChange(event) {
      this.goodsForm.add.is_hot = false;
      this.goodsForm.add.is_recommend = false;
      this.goodsForm.add.is_specialty = false;
      this.goodsForm.add.is_discount = false;
      this.goodsForm.edit.is_hot = false;
      this.goodsForm.edit.is_recommend = false;
      this.goodsForm.edit.is_specialty = false;
      this.goodsForm.edit.is_discount = false;
      event.forEach(element => {
        switch (element) {
          case "热销":
            this.goodsForm.edit.is_hot = true;
            this.goodsForm.add.is_hot = true;
            break;
          case "推荐":
            this.goodsForm.edit.is_hot = true;
            this.goodsForm.add.is_recommend = true;
            break;
          case "招牌":
            this.goodsForm.edit.is_hot = true;
            this.goodsForm.add.is_specialty = true;
            break;
          case "折扣":
            this.goodsForm.edit.is_hot = true;
            this.goodsForm.add.is_discount = true;
            break;
        }
      });
    },
    handleRemove(result, filelist) {
      this.edit.images = filelist;
      this.add.images = filelist;
      this.notice("success", result.message);
    },
    handleImageSuccess(result, file, filelist) {
      this.edit.images = filelist;
      this.add.images = filelist;
      this.notice("success", result.message);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleAvatarSuccess(result) {
      console.log(result);
      
      this.goodsForm.add.avatar = result.data;
      this.notice("success", result.message);
    },
    editType(event) {
      this.editTypeTitle = "编辑 [ " + event.title + " ] 菜单";
      this.formType.id = event.id;
      this.formType.title = event.title;
      this.formType.status = event.status === "Normal" ? true : false;
      this.formType.sort = event.sort;
      this.editClassifyType = true;
    },
    showOne() {
      alert(this.remark);
    },
    // 添加规格表格
    getTable() {
      this.isTable = true;
      this.tableData = [];
      this.group = [];
      this.list = [];
      const num = this.standData.length;
      this.standData.forEach(item => {
        this.list.push(item.children);
      });
      var arr = [];
      var that = this;

      function func(skuarr = [], i) {
        for (let j = 0; j < that.list[i].length; j++) {
          if (i < that.list.length - 1) {
            skuarr[i] = that.list[i][j].title;
            func(skuarr, i + 1);
          } else {
            arr.push([...skuarr, that.list[i][j].title]);
          }
        }
        return arr;
      }
      let newList = func([], 0);
      let b;
      newList.forEach(item => {
        b = "";
        for (let i = 0; i < num; i++) {
          let a = item[i];
          b = b + a + ",";
        }
        this.group.push(b);
      });
      let table = [];
      for (let j = 0; j < this.group.length; j++) {
        table.push({
          spec: this.group[j],
          count: 0,
          price: 20,
          member_price: 10,
          discount_price: 10
        });
      }
      this.tableData = table;
    },
    addStand(i) {
      //  限制规格种类不超过4种
      if (this.standData.length > 3) {
        this.$message("不能超过四行");
      } else {
        this.standData.push({
          title: "",
          children: []
        });
      }
    },
    addAtrr(i) {
      //  限制属性值不超过5个
      if (this.standData[i].children.length > 4) {
        this.$message("不能超过5个");
      } else {
        // 存的时候是存的对象
        this.standData[i].children.push({
          children: ""
        });
      }
    },
    // 删除规格行
    remove(i) {
      this.standData.splice(i, 1);
    },
    closeAtrr(a, b) {
      //   console.log(a, b);
      this.standData[a].children.splice(b, 1);
    },
    async getCategoryList(params = {}) {
      params.pageSize = this.pageSize;
      axios
        .get("/api/store/admin/integral/category")
        .then(result => {
          this.categoryData.lists = result.data.data;
          if (result.data.data[0]) {
            this.currentCategoryId = result.data.data[0].id;
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    async getGoodsList(params = {}, id) {
      params.page = this.page;
      params.pageSize = this.pageSize;
      axios
        .get("/api/store/admin/integral/goods/" + id,{params})
        .then(result => {
          this.goodsList = result.data.data.data;
          if(result.data.current_page > result.data.last_page){
            this.page = 1;
            this.getGoodsList( {},id)
          }else{
             this.page = result.data.data.current_page;
          }
          this.pageCount = result.data.datalast_page
          this.count = result.data.data.total;
          this.pageSize = result.data.data.per_page;
        })
        .catch(error => {
          console.log(error);
        });
    },
    refresh() {
      this.getGoodsList()
    },
    onTreeDataChange() {},
    getCategoryData(event) {
      // 点击分类获取数据
      console.log(event);
    },
    deleteGood(event){
      this.$confirm("您确定要删除此商品吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          axios
            .get("/api/store/admin/integral/delete/" + event.id)
            .then(result => {
              this.notice("success", result.data.message);
              this.getGoodsList({}, this.currentCategoryId);
              this.addGroupType = false;
            })
            .catch(error => {
              this.notice("error", error.response.data.message);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    ondeleteType(event) {
      this.$confirm("您确定要删除此分类吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          axios
            .get("/api/store/admin/integral/deleteType/" + event.id)
            .then(result => {
              this.notice("success", result.data.message);
              this.getCategoryList();
              this.addGroupType = false;
            })
            .catch(error => {
              this.notice("error", error.response.data.message);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    onSubmit(type) {
      if (type == "createType") {
        let params = this.formType;
        axios
          .post("/api/store/admin/integral/createType", params)
          .then(result => {
            this.notice("success", result.data.message);
            this.getCategoryList();
            this.addClassifyType = false;
          })
          .catch(error => {
            this.notice("error", error.response.data.message);
          });
      }

      if (type == "editType") {
        let params = this.formType;
        axios
          .post(
            "/api/store/admin/integral/editType/" + this.formType.id,
            params
          )
          .then(result => {
            this.notice("success", result.data.message);
            this.getCategoryList();
            this.addClassifyType = false;
          })
          .catch(error => {
            this.notice("error", error.response.data.message);
          });
      }

      if (type == "addGoods") {
        this.goodsForm.add.spec_price = JSON.stringify(this.tableData);
        let params = this.goodsForm.add;
        if (params.is_specification) {
          let data = JSON.stringify(this.standData);
          this.goodsForm.add.spec_data = data;
        }
        if (this.add.images) {
          let array = []
          this.add.images.forEach(item => {
            array.push(item.response.data);
          });
          this.goodsForm.add.images = JSON.stringify(array);
        }
        if(!params.is_specification){
          delete params.spec_data;
          delete params.spec_price;
        }
        let paramsData = params;
        paramsData.status = params.status == '1'? 'Normal' : 'Unshelve';
        axios
          .post(
            "/api/store/admin/integral/create/" + this.currentCategoryId,
            paramsData
          )
          .then(result => {
            this.notice("success", result.data.message);
            this.getGoodsList({}, this.currentCategoryId);
            this.addGoodsType = false;
          })
          .catch(error => {
            this.notice("error", error.response.data.message);
          });
      }

      if (type == "editGoods") {
        this.goodsForm.edit.spec_price = JSON.stringify(this.tableData);
        let params = this.goodsForm.edit;
        
        if (params.is_specification) {
          let data = JSON.stringify(this.standData);
          this.goodsForm.edit.spec_data = data;
        }
        if (this.edit.images) {
          let array = []
          this.edit.images.forEach(item => {
            if(item.response){
              array.push(item.response.data);
            }else{
              array.push(item.url);
            }
          });
          this.goodsForm.edit.images = JSON.stringify(array);
        }
       
        delete params.type;
        let paramsData = params;
         if(!paramsData.is_specification){
           delete paramsData.spec_price;
           delete paramsData.spec_data;
        }
        paramsData.status = params.status == '1'? 'Normal' : 'Unshelve';
        axios
          .post(
            "/api/store/admin/integral/edit/" + this.editId,
            paramsData
          )
          .then(result => {
            this.notice("success", result.data.message);
            this.getGoodsList({}, this.currentCategoryId);
            this.editGoodsType = false;
          })
          .catch(error => {
            this.notice("error", error.response.data.message);
          });
      }
    },
    addSpecWrap() {
      this.addSpecList.push({
        title: "",
        child: []
      });
    },
    deleteSpecChild(e) {
      this.addSpecList.splice(e, 1);
    },
    addSpecChild(e) {
      this.addSpecList[e].child.push({
        title: ""
      });
    },
    beforeUpload(file){
      console.log(123123);
      
      console.log(file);
      
    },
    refreshSpec() {
      let arr = [];
      this.addSpecList.forEach((item, index) => {
        let data = this.forSpecChild(item.child);
        arr.push(data);
      });
      this.specTopTableData = this.takeSpecTitle(this.addSpecList);
      if (this.addSpecList.length <= 1) {
        let anArr = [];
        arr[0].forEach(item => {
          let toArr = [];
          toArr.push(item);
          anArr.push(toArr);
        });
        this.spec_list = anArr;
      } else {
        this.spec_list = this.calcDescartes(arr);
      }
    },
    trimSpace(array) {
      for (var i = 0; i < array.length; i++) {
        if (
          array[i] == " " ||
          array[i] == null ||
          typeof array[i] == "undefined"
        ) {
          array.splice(i, 1);
          i = i - 1;
        }
      }
      return array;
    },
    takeSpecTitle(data) {
      let i = new Array();
      data.forEach(item => {
        i.push({
          title: item.title
        });
      });
      return i;
    },
    forSpecChild(data) {
      let arr = [];
      data.forEach(item => {
        arr.push({
          title: item.title,
          library: 0,
          rebate_price: 0,
          price: 0,
          vip_price: 0
        });
      });
      return arr;
    },
    oddSpecList(data) {},
    calcDescartes(array) {
      if (array.length < 2) return array[0] || [];
      return [].reduce.call(array, function(col, set) {
        var res = [];
        col.forEach(function(c) {
          set.forEach(function(s) {
            var t = [].concat(Array.isArray(c) ? c : [c]);
            t.push(s);
            res.push(t);
          });
        });
        return res;
      });
    },
    notice(index, str) {
      switch (index) {
        case "error":
          this.$message({
            dangerouslyUseHTMLString: true,
            message: str,
            type: "error"
          });
          break;
        case "success":
          this.$message({
            message: str,
            type: "success"
          });

          break;
        case "warning":
          this.$message({
            message: str,
            type: "warning"
          });
          break;
        default:
          this.$message(str);
          break;
      }
    }
  }
};
</script>

<style lang="less">
.stand {
  ul {
    list-style-type: none;
    padding-inline-start: 0;

    .spec_header {
      line-height: 44px;
      background: #f3f3f3;
      padding: 0 10px;
    }
  }
}

.putt {
  padding: 10px;

  .putt-item {
    line-height: 44px;
    display: inline-block;
    position: relative;
    margin-right: 10px;
  }
}

.avatar-uploader .el-upload {
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 80px;
  height: 80px;
  line-height: 80px !important;
  text-align: center;
  border: 1px dashed #ccc;
}

.avatar {
  width: 80px;
  height: 80px;
  display: block;
}

.official-wrap .container {
  position: relative;
  width: auto;
  height: auto;
  padding: 5px 10px;
  display: block;
}

.uploadList .el-upload-list--picture-card .el-upload-list__item {
  width: 100px !important;
  height: 100px !important;
}

.uploadList .el-upload {
  width: 100px !important;
  height: 100px !important;
  line-height: 100px !important;
}
</style>
